
import React, { useRef, useMemo } from 'react';
import { Upload } from 'antd';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
// import "quill/dist/quill.bubble.css";
// import "quill/dist/quill.core.css";

function EditorQuii({ value, onChange }) {
  const quillRef = useRef(null)

  // TODO: 形成一个配置文件？
  let modules = useMemo(() => {
    return {
      // 工具栏配置
      toolbar: {
        container: [
          ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
          ["blockquote", "code-block"], // 引用  代码块
          [{ header: 1 }, { header: 2 }], // 1、2 级标题
          [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
          [{ script: "sub" }, { script: "super" }], // 上标/下标
          [{ indent: "-1" }, { indent: "+1" }], // 缩进
          // [{'direction': 'rtl'}],                         // 文本方向
          [{ size: ["small", false, "large", "huge"] }], // 字体大小
          [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
          [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
          [{ font: [] }], // 字体种类
          [{ align: [] }], // 对齐方式
          ["clean"], // 清除文本格式
          ["link", "image", "video"] // 链接、图片、视频
        ],
        handlers: {
          // 重写图片工具，将调用Upload组件上传
          image: function (isCustom) {
            if (isCustom) {
              // 触发input框选择图片文件
              document.querySelector(".quill-upload input").click();
            } else {
              quillRef.current.getEditor().format("image", false);
            }
          }
        }
      },
    }
  }, [])


  return (
    <>
      {/* 用Upload替换quill的图片上传 */}
      <Upload
        className='quill-upload'
        accept='image/*'
        showUploadList={false}
      >

      </Upload>
      < ReactQuill ref={quillRef} theme="snow" value={value} modules={modules} />
    </>
  )
}

export default EditorQuii